<template>
  <div class="container">
    <div id="mapContent" ref="mapContent"></div>
    <div class="shouqi" v-show="!headerShowSatatus" @click="showShouqi">
      <el-icon style="color: #fff">
        <ArrowDownBold />
      </el-icon>
    </div>
    <div :class="{ 'tree-container': true, 'top-heihgt': headerShowSatatus }">
      <treeList></treeList>
    </div>
    <div :class="{
      'gongjuxiang-container': true,
      'top-heihgt': headerShowSatatus,
    }">
      <div class="box-item-btn" @click="ulShow = !ulShow">
        <i class="icon iconfont icon-gongjuxiang"></i>
      </div>
      <ul class="gongjuxiang-list" v-show="ulShow">
        <li>
          <i class="icon iconfont icon-manyoufeihang"></i>
          <span>漫游飞行</span>
        </li>
        <li>
          <i class="icon iconfont icon-tushuchaxun"></i>
          <span>在线查询</span>
        </li>
        <li>
          <i class="icon iconfont icon-shuxingchaxun"></i>
          <span>属性查询</span>
        </li>
        <li>
          <i class="icon iconfont icon-podupoxiang"></i>
          <span>坡度坡向</span>
        </li>
        <li>
          <i class="icon iconfont icon-dixingpoumian"></i>
          <span>地形剖面</span>
        </li>
      </ul>
    </div>
    <div :class="{ 'caozuo-container': true, 'top-heihgt': headerShowSatatus }">
      <el-tooltip class="box-item" effect="dark" placement="left" v-for="item in caozuoList" :key="item.name"
        :content="item.name">
        <el-button class="box-item-btn">
          <i :class="`icon iconfont ` + item.icon"></i>
        </el-button>
      </el-tooltip>
    </div>
    <!-- 指北针组件 -->
    <Navigation class="navigation-container" @camera-north="toolbarHandle" :rotateValue="rotateValue"></Navigation>
    <!-- 切换地图组件 -->
    <ToolBar
      @changeBaseMap="changeBaseMap"
      @changeMapStyle="changeMapStyle"
    ></ToolBar>
    <!-- 在线查询面板 -->
    <div :class="{ 'analysis-tool-container': true, 'top-heihgt': headerShowSatatus }">
      <AnalysisTool></AnalysisTool>
    </div>
    
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  computed,
  onBeforeUnmount,
  watch,
  reactive,
  toRaw,
} from "vue";
import treeList from "../components/common/treeList.vue";
import Navigation from "./components/navigation.vue";
import ToolBar from "./components/toolBar.vue";
import AnalysisTool from "../components/common/AnalysisTool.vue";
import { emitter } from "../utils/eventBus";
import useHeaderStore from "@/store/modules/header";
import { initWmtsMap, initTdtMap, removeLayer } from "@/mixin/server";
import { sw } from "element-plus/es/locales.mjs";
const ulShow = ref(false);
const mapContent = ref(null);
const headerStore = useHeaderStore();
const headerShowSatatus = computed(() => headerStore.headerShowSatatus);
const rotateValue = ref(0);
const currentMap = ref("");
const currentlayer1 = ref(["注记"]);
const currentlayer2 = ref(["注记"]);
const currentlayer3 = ref(["注记"]);

const caozuoList = [
  {
    name: "时光机",
    icon: "icon-shiguangji",
  },
  {
    name: "云查询",
    icon: "icon-juanlianliulan",
  },
  {
    name: "云查询",
    icon: "icon-yun",
  },
  {
    name: "出图",
    icon: "icon-a-yunchaxun-xian2",
  },
];

onMounted(() => {
  //初始化时默认加载所有的注记
  // 初始化球体
  initGlobe();
});

const showShouqi = () => {
  emitter.emit("Showheader", true);
};
//双击正射视角
const toolbarHandle = () => {
  window.viewer.scene.camera.flyTo({
    //获取当前画面点的中心和高度
    destination: new SuperMap3D.Cartesian3.fromDegrees(
      (viewer.scene.camera.positionCartographic.longitude * 180) / Math.PI,
      (viewer.scene.camera.positionCartographic.latitude * 180) / Math.PI,
      viewer.scene.camera.positionCartographic.height
    ),
    orientation: {
      //水平偏角，默认正北 0
      heading: 0,
      //俯视角，默认-90，垂直向下
      pitch: SuperMap3D.Math.toRadians(-90),
      // 旋转角roll:SuperMap3D.Math.toRadians(3600)
    },
    duration: 5, //过渡时间
  });
};
//切换路网或者矢量
const changeMapStyle = (e) => {
  if (e.item != currentMap.value) {
    return;
  }

  switch (e.item) {
    case "vec":
      currentlayer1.value = e.value;
      //加载相应的vec图层
      if (e.value.includes("注记")) {
        //加载注记
        initWmtsMap(
          "http://200.1.1.9:8091/mapserver/all/WMTS/1.0/TDTUSJXZQ/TDTUSJXZQ",
          "GOOGLETCYXSJS202301P",
          2
        );
      } else {
        //移除注记
        removeLayer(2);
      }
      break;
    case "img":
      currentlayer2.value = e.value;
      //加载相应的img图层
      if (e.value.includes("注记")) {
        //加载注记
        initWmtsMap(
          "http://200.1.1.9:8091/mapserver/all/WMTS/1.0/TDTUSJXZQ/TDTUSJXZQ",
          "GOOGLETCYXSJS202301P",
          2
        );
      } else {
        //移除注记
        removeLayer(2);
      }
      if (e.value.includes("路网")) {
        //加载路网
        initWmtsMap(
          "http://200.1.1.9:8091/mapserver/vmap/WMTS/1.0/JTZYSJY2022G/JTZYSJY2022G",
          "JTZYSJY2022G",
          1
        );
      } else {
        //移除路网
        removeLayer(1);
      }
      break;
    case "yunxuan":
      currentlayer3.value = e.value;
      //加载相应的yunxuan图层
      if (e.value.includes("注记")) {
        //加载注记
        initWmtsMap(
          "http://200.1.1.9:8091/mapserver/all/WMTS/1.0/TDTUSJXZQ/TDTUSJXZQ",
          "GOOGLETCYXSJS202301P",
          2
        );
      } else {
        //移除注记
        removeLayer(2);
      }
      if (e.value.includes("路网")) {
        //加载路网
        initWmtsMap(
          "http://200.1.1.9:8091/mapserver/vmap/WMTS/1.0/JTZYSJY2022G/JTZYSJY2022G",
          "JTZYSJY2022G",
          1
        );
      } else {
        //移除路网
        removeLayer(1);
      }
      break;
  }
};
//切换底图
const changeBaseMap = (baseMap) => {
  currentMap.value = baseMap;
  // 切换底图
  switch (baseMap) {
    case "yunxuan":
      initYunXxuanMap();
      break;
    case "vec":
      initVecMap();
      break;
    case "img":
      initImgMap();
      break;
  }
};

const initGlobe = () => {
  // 创建 Viewer 实例
  window.viewer = new SuperMap3D.Viewer(mapContent.value, {
    contextOptions: {
      contextType: 2, // Webgl2:2 ; WebGPU:3
    },
    navigation: false,
  });
  // 添加基础拖放功能
  viewer.extend(SuperMap3D.viewerDragDropMixin);

  viewer.scenePromise.then((scene) => {
    initImgMap();
    //监听视角变化
    window.viewer.scene.camera.changed.addEventListener(() => {
      // 相机任何变化时的处理逻辑
      const heading = window.viewer.camera.heading;
      rotateValue.value = heading * (180 / 3.1415927);
    });
  });
  //初始化时飞入
  viewer.scene.camera.flyTo({
    destination: new SuperMap3D.Cartesian3.fromDegrees(
      112.986827,
      28.231044,
      50000
    ),
    orientation: {
      heading: 0,
      pitch: SuperMap3D.Math.toRadians(-90),
      roll: 0,
    },
    duration: 3,
  });
};
//初始影像图层
const initImgMap = () => {
  window.viewer.imageryLayers.removeAll();
  // 添加一张影像图层
  initWmtsMap(
    "http://200.1.1.9:7051/ime-cloud/rest/GOOGLETCYXSJS202301P/wmts",
    "GOOGLETCYXSJS202301P",
    3
  );
  check(currentlayer2.value);
};

//切换晕眩图层
const initYunXxuanMap = () => {
  // 移除所有图层
  window.viewer.imageryLayers.removeAll();
  initTdtMap("TER_C"); //天地图全球地形晕渲服务（经纬度投影）。
  initTdtMap("TER_W"); //天地图全球地形晕渲服务（墨卡托投影）。
  //湖南晕眩图层
  initWmtsMap(
    "http://200.1.1.9:7051/ime-cloud/rest/HNDXDSY2024DEM/wmts",
    "HNDXDSY2024DEM"
  );
  check(currentlayer3.value);
};
//添加矢量图层
const initVecMap = () => {
  // 移除所有图层
  window.viewer.imageryLayers.removeAll();
  initTdtMap("VEC_C"); //天地图全球矢量地图服务（经纬度投影）。
  check(currentlayer1.value);
};

const check = (item) => {
  if (item.includes("路网")) {
    //加载路网
    initWmtsMap(
      "http://200.1.1.9:8091/mapserver/vmap/WMTS/1.0/JTZYSJY2022G/JTZYSJY2022G",
      "JTZYSJY2022G",
      1
    );
  }
  if (item.includes("注记")) {
    //加载相应的注记
    initWmtsMap(
      "http://200.1.1.9:8091/mapserver/all/WMTS/1.0/TDTUSJXZQ/TDTUSJXZQ",
      "GOOGLETCYXSJS202301P",
      2
    );
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;

  i {
    color: #fff;
    font-size: 16px;
  }
  .analysis-tool-container{
    position: absolute;
    top: 20px;
    right: 70px;
    bottom: 20px;
    background-color: rgba(16, 32, 46, 0.8);
    z-index: 999;
    width: 465px;
  }

  .tree-container {
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: 20px;
    width: 438px;
    z-index: 1;
  }

  .navigation-container {
    position: absolute;
    bottom: 150px;
    right: 20px;
    width: 46px;
    height: 46px;
  }

  .gongjuxiang-container {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #10202e;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;

    .box-item-btn {
      position: relative !important;
      width: 36px;
      line-height: 36px;
      border-radius: 4px;
      background-color: #10202e;
      display: flex;
      justify-content: center;
      border: none;

      i {
        font-size: 18px;
      }
    }

    .gongjuxiang-list {
      position: absolute;
      top: 0px;
      right: 66px;
      display: flex;
      background-color: #10202e;
      z-index: 1;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        position: relative;
        width: 110px;
        height: 36px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        i {
          font-size: 20px;
        }

        span {
          margin-left: 5px;
          font-size: 12px;
        }

        &:hover {
          i {
            color: #067acc !important;
          }

          span {
            color: #067acc;
          }
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 100%;
          width: 1px;
          height: 50%;
          background-color: #e4e7ed52;
          transform: translateY(-50%);
          z-index: -1;
        }
      }

      :last-child::after {
        display: none;
      }
    }
  }

  .caozuo-container {
    position: absolute;
    top: 70px;
    right: 20px;
    width: 36px;
    background-color: #10202e;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;

    i {
      color: #fff;
    }

    .box-item-btn {
      position: relative !important;
      width: 36px;
      height: 46px;
      background-color: #10202e;
      display: flex;
      justify-content: center;
      border: none;

      i {
        font-size: 20px;
      }

      &:hover {
        i {
          color: #067acc;
        }
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 50%;
        height: 1px;
        background-color: #e4e7ed52;
        transform: translateX(-50%);
        z-index: 1;
      }
    }

    .box-item-btn:last-child::after {
      display: none;
    }

    ::v-deep .el-button+.el-button {
      margin-left: 0 !important;
    }
  }

  .shouqi {
    position: absolute;
    top: 0;
    right: calc(50% - 30px);
    width: 60px;
    line-height: 20px;
    z-index: 1;
    background-color: #1ccc;
    opacity: 0.8;
    cursor: pointer;
    text-align: center;
  }

  #mapContent {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>
